<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>为角色分配资源</title>
<style type="text/css">
/* @@@@@@@@@@ 树形结构专用样式  @@@@@@@@@@ */
.node_wrap{
	margin-left:16px;
}
.node:hover{
	background-color:#9af;
}
.node_label{
	cursor: default;
}
.node_children{
	display: none;
}
.node_wrap img{
	border:none;
}
/* @@@@@@@@@@ 树形结构专用样式  @@@@@@@@@@ */
</style>
<script type="text/javascript">
var basePath = "<%=basePath%>".replace(":80/","/");//解决80端口的差异
var submitPath = basePath + "auth/role/";

function leafClickHandler(sender){
	if(sender.src==(basePath + "auth/image/nodeblank.png")){		
		return;
	}
	if(sender.src==(basePath + "auth/image/nodeclose.png")){
		sender.src=(basePath + "auth/image/nodeopen.png");
		sender.parentNode.parentNode.lastChild.style.display = "block";
	}else{
		sender.src=(basePath + "auth/image/nodeclose.png");
		sender.parentNode.parentNode.lastChild.style.display = "none";
	}
}

// 选择框结点单点事件
function selecterClickHandler(sender){	
	// 以下两个递归函数已经快不是人看的了
	// 先不考虑半选问题  // 直接看是否选中
	applyChildren(sender, sender.getAttribute("state"));		
	// 统计选中情况决定是否选
	applyParents(sender);
}

// 递归：子节点 处理 ： 选中状态一致
function applyChildren(child, state){	
	// 反转节点选中状态
	//经测试 IE8, 最新火狐，最新GOOGLE都支持动态添加属性，放心使用
	if(state=="2"){
		child.setAttribute("state", "0");
		child.src = basePath + "auth/image/unselect.png";
	}else{
		child.setAttribute("state", "2");
		child.src = basePath + "auth/image/fullselect.png";
	}
	
	var children = child.parentNode.parentNode.lastChild.childNodes;
	// 如果有子节点，把所有子节点应用到一到致
	for(var i=0; i<children.length; i++){
		// @@@@  递归点  @@@@
		applyChildren(children[i].firstChild.childNodes[1], state);
	}
	
}

// 递归：父节点处理 ： 选中状态[未、半、全]	
function applyParents(child){		
	// 全选中的数量
	var fullselectedCount = 0;	 
	// 是否包含半选中
	var hasHalf= false;	
	
	// 如果超出出树形HTML结构范围停止
	if(child.parentNode.parentNode.className != "node_wrap") return;
	// 如果没有上级就停止
	if(child.parentNode.parentNode.parentNode.className != "node_children") return;
	
	var parentWrap = child.parentNode.parentNode.parentNode.parentNode;
	var parents = parentWrap.lastChild.childNodes;
	for(var i=0; i<parents.length; i++){
		var curr = parents[i].firstChild.childNodes[1];
		// 由于只有全选和未选两种状态
		// 统计全选中的项的个数
		if(curr.getAttribute("state")=="2"){
			fullselectedCount++;
		}
		// 存在半选中的项
		else if(curr.getAttribute("state")=="1"){
			hasHalf = true;
		}		
	}
	
	var parent = parentWrap.firstChild.childNodes[1];
	// 确定节点选中状态
	if(fullselectedCount == parents.length)  // 子节点全部选中了
	{
		parent.setAttribute("state", "2");
		parent.src = basePath + "auth/image/fullselect.png";		
	}
	// 子节点存在半选状态的项 // 或子节点当中只有部分是全选状态 // 全选中的情况已经过滤
	else if(hasHalf || fullselectedCount > 0){
		parent.setAttribute("state", "1");
		parent.src = basePath + "auth/image/halfselect.png";				
	}
	else{
		parent.setAttribute("state", "0");
		parent.src = basePath + "auth/image/unselect.png";		
	}
	
	// @@@@  递归点  @@@@
	applyParents(parent);
}


// 保存
function btnSaveClickHandler(){
	// 扁历树形取得选中资源，提交并保存
	var fm = document.getElementById("allot_form");
	fm.action = submitPath + "saveallot.do";
	
	var tree = document.getElementById("tree");
	var imgs = tree.getElementsByTagName("img");
	for(var i=0; i<imgs.length; i++){
		if(imgs[i].getAttribute("state")=="2" || imgs[i].getAttribute("state")=="1"){
			var input = document.createElement("input");
			input.type="hidden";
			input.name="sources";
			input.value=imgs[i].getAttribute("pk");
			fm.appendChild(input);
		}
	}
	// 提交表单
	fm.submit();
}

// 窗体加载时应用选中状态
window.onload=function(){
	var tree = document.getElementById("tree");	
	applyInitial(tree.firstChild.firstChild.childNodes[1]);
};

// 初始化，区分半选情况
function applyInitial(node){
	var children = node.parentNode.parentNode.lastChild.childNodes;
	if(children.length==0)return;

	// 全选中的数量
	var fullselectedCount = 0;	 
	// 是否包含半选中
	var hasHalf= false;	
	for(var i=0; i<children.length; i++){
		// @@@ 递归点 @@@
		applyInitial(children[i].firstChild.childNodes[1]);
				
		if(children[i].firstChild.childNodes[1].getAttribute("state")=="2"){
			fullselectedCount++;
		}
		// 存在半选中的项
		else if(children[i].firstChild.childNodes[1].getAttribute("state")=="1"){
			hasHalf = true;
		}	
	}	
	// 确定节点选中状态
	if(fullselectedCount == children.length)
	{
		node.setAttribute("state", "2");
		node.src = basePath + "auth/image/fullselect.png";		
	}
	else if(hasHalf || fullselectedCount > 0){
		node.setAttribute("state", "1");
		node.src = basePath + "auth/image/halfselect.png";				
	}
	else{
		node.setAttribute("state", "0");
		node.src = basePath + "auth/image/unselect.png";		
	}
}
</script>

<!-- JS与CSS引用 [START] -->
<%@include file="/WEB-INF/include/head-common.jsp" %>
<!-- JS与CSS引用 [END] -->


</head>
<body>
<div id="main_container">

	<!-- 网页顶部信息 [START] -->
	<%@include file="/WEB-INF/include/header.jsp" %> 
	<!-- 网页顶部信息 [END] -->
	
    
    <div class="main_content">
    	<!-- 网页顶部导航菜单 [START] -->
    	<%@include file="/WEB-INF/include/main-menu.jsp" %>
        <!-- 网页顶部导航菜单 [END] -->            
                    
    <div class="center_content">  
    
    
    
    <div class="left_content">
    
    
    		<!-- 网页左侧菜单 [START] -->
            <%@include file="/WEB-INF/include/sidebarmenu.jsp" %>
            <!-- 网页左侧菜单 [END] --> 
            
            
           
    
    </div>  
    
    
    <!-- 右侧主要内容区 -->
    <div class="right_content">
    	<div class="position">
	    	<div class="position_box">当前位置：<%@include file="/WEB-INF/include/sitemap.jsp" %></div>
	    </div>              
        
	<!-- 右侧顶部标题 -->
    <h2>为角色分配资源</h2> 
	<form id="allot_form" method="post" action="#">
		<input name="pkRoleinfo" type="hidden" value="${role.pkRoleinfo }"/>
	</form>
	<div>
	<div><span>系统编号：</span><span style="font-weight: bold;color:#48f;">${role.pkRoleinfo }</span></div>
	<div><span>角色名称：</span><span style="font-weight: bold;color:#48f;">${role.rolename }</span></div>
	<div><span>添加时间：</span><span style="font-weight: bold;color:#48f;">${role.adddatetime }</span></div>
	<div><span>修改时间：</span><span style="font-weight: bold;color:#48f;">${role.moddatetime }</span></div>
	</div>
	<!-- 出于javascript兼容性，树形结构中不能有换行 -->
	<div id="tree">${tree }</div>
	<div><button onclick="btnSaveClickHandler()">保存</button> &nbsp;&nbsp; <a href="auth/role.do">取消，并返回角色列表</a></div>                    
     
     
     
     
     
     
     
     </div>
     <!-- end of right content-->
            
                    
  </div>   
  <!--end of center content -->               
                    
                    
    
    
    <div class="clear"></div>
    </div> <!--end of main content-->
	
    
    <div class="footer">
    
    	<div class="left_footer">IN ADMIN PANEL | Powered by <a href="http://indeziner.com">INDEZINER</a></div>
    	<div class="right_footer"><a href="http://indeziner.com"><img src="images/indeziner_logo.gif" alt="" title="" border="0" /></a></div>
    
    </div>

</div>		
</body>
</html>
